import React, { useEffect, useState, Suspense } from 'react'
import { Layout, Menu, Dropdown, Image, Row, Col, Spin, Modal, message } from 'antd';
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom'
import CheckLoginState from '../../js/CheckLoginState';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    RedoOutlined,
    HeartOutlined,
    UserOutlined,
    LogoutOutlined,
    ProfileOutlined,
    GiftOutlined,
} from '@ant-design/icons';
import {
    MyChangeApply, MyChangeRespondent, MyLike, MyChange, ChangeList,
    Shop, MyShopHistroy,
    MyInfo,
    DoRank,
    OrgList, DoHistory,
    OrgDetail,

} from '../../js/AllPage'
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
export default function Index() {
    const [collapsed, setCollapsed] = useState(false);
    const [loginUser, setLoginUser] = useState(JSON.parse(localStorage.getItem("loginUser")) || null)
    const [myId, setMyid] = useState(loginUser?.id || null)
    const navigate = useNavigate();
    const [logoutVisible, setlogoutVisible] = useState(false)
    useEffect(async () => {
        if (loginUser == null || loginUser == "" || loginUser == undefined) {
            navigate("/LoginAndRegister/*")
            message.error("请登入账号!")
        }
        if (loginUser.role === 0) navigate('/adminMenu/*')
        let checkLoginUserRs = await CheckLoginState(loginUser)
        if (checkLoginUserRs.state === "0") {
            localStorage.setItem("loginUser", checkLoginUserRs.loginUser)
            setLoginUser(JSON.parse(localStorage.getItem("loginUser")));
            if (loginUser.role === 1) navigate('/userMenu/*')
        }
        if (checkLoginUserRs.state === "3") {
            localStorage.clear();
            message.error(checkLoginUserRs.message)
            navigate("/LoginAndRegister/*")
        }
    }, [])
    const dropdownmenu = (
        <Menu>
            <Menu.Item icon={<UserOutlined />} onClick={() => { navigate(`myInfo/*`) }}><span>个人中心</span></Menu.Item>
            <Menu.Item danger icon={<LogoutOutlined />} onClick={() => { setlogoutVisible(true) }}><span>退出</span></Menu.Item>
        </Menu>
    );
    const togglecollapsed = () => {
        let t = collapsed;
        setCollapsed(!t)
    }
    const logout = () => {
        localStorage.clear();
        navigate("/*");
    }
    return (
        <Layout style={{ height: '100%', minHeight: '100VH' }}>
            <Sider trigger={null} collapsible collapsed={collapsed} className="userMenu">
                <Menu

                    mode="inline"
                    defaultSelectedKeys={['11']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: '100%' }}
                // theme="dark"
                >
                    <SubMenu key="sub1" style={{ fontWeight: '700' }} title="旧物交换" icon={<RedoOutlined />}>
                        <Menu.Item key="11" style={{ fontWeight: '400' }} onClick={() => { navigate(`changeList/*`) }}>交换列表</Menu.Item>
                        <Menu.Item key="12" style={{ fontWeight: '400' }} onClick={() => { navigate(`myChange/*`) }}>我的物品</Menu.Item>
                        <Menu.Item key="13" style={{ fontWeight: '400' }} onClick={() => { navigate(`myChangeApply/*`) }}>我的申请</Menu.Item>
                        <Menu.Item key="14" style={{ fontWeight: '400' }} onClick={() => { navigate(`myChangeRespondent/*`) }}>别人想要</Menu.Item>
                        <Menu.Item key="15" style={{ fontWeight: '400' }} onClick={() => { navigate(`myLike/*`) }}>我的收藏</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub2" style={{ fontWeight: '700' }} title="旧物捐赠" icon={<HeartOutlined />}>
                        <Menu.Item key="21" style={{ fontWeight: '400' }} onClick={() => { navigate(`orgList/*`) }}>机构列表</Menu.Item>
                        <Menu.Item key="22" style={{ fontWeight: '400' }} onClick={() => { navigate(`doHistory/*`) }}>历史捐赠</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub3" style={{ fontWeight: '700' }} title="礼物兑换" icon={<GiftOutlined />}>
                        <Menu.Item key="31" style={{ fontWeight: '400' }} onClick={() => { navigate(`shop/*`) }}>礼物商城</Menu.Item>
                        <Menu.Item key="32" style={{ fontWeight: '400' }} onClick={() => { navigate(`myShopHistroy/*`) }}>历史兑换</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub4" style={{ fontWeight: '700' }} title="排行榜" icon={<ProfileOutlined />}>
                        <Menu.Item key="41" style={{ fontWeight: '400' }} onClick={() => { navigate(`doRank/*`) }}>排行榜</Menu.Item>
                    </SubMenu>
                </Menu>
            </Sider>
            <Layout>
                <Header style={{ backgroundColor: "#FFF", display: 'flex', justifyContent: 'space-between', alignItems: 'center', }}>
                    <Row align="middle">
                        <Col>
                            {
                                collapsed == true ? <a onClick={togglecollapsed}><MenuUnfoldOutlined style={{ fontSize: 20 }} /></a> : <a onClick={togglecollapsed}><MenuFoldOutlined style={{ fontSize: 20 }} /></a>
                            }
                        </Col>
                    </Row>

                    <Row align="middle">
                        <Col>
                            <Dropdown
                                overlay={dropdownmenu}
                                arrow={true}
                                trigger={['click']}
                            >
                                <Image
                                    preview={false}
                                    width={"0.4rem"}
                                    height={"0.4rem"}
                                    src={`http://localhost:8080/getUserHead?id=` + myId}
                                />
                            </Dropdown>
                        </Col>
                    </Row>
                </Header>
                <Content
                    className="pageBg"
                    style={{
                        margin: `0.5%`,
                        padding: `1%`,
                        minHeight: `100%VH`,
                        backgroundColor: '#fff'
                    }}
                >
                    <Suspense fallback={<Spin size='large' />}>
                        <Routes>
                            <Route path='changeList/*' element={<ChangeList />} />
                            <Route path='myChange/*' element={<MyChange />} />
                            <Route path='myChangeApply/*' element={<MyChangeApply />} />
                            <Route path='myChangeRespondent/*' element={<MyChangeRespondent />} />
                            <Route path='myLike/*' element={<MyLike />} />
                            <Route path='shop/*' element={<Shop />} />
                            <Route path='myShopHistroy/*' element={<MyShopHistroy />} />
                            <Route path='doRank/*' element={<DoRank />} />
                            <Route path='myInfo/*' element={<MyInfo />} />
                            <Route path='orgList/*' element={<OrgList />} />
                            <Route path='doHistory/*' element={<DoHistory />} />
                            <Route path='orgDetail/*' element={<OrgDetail />} />
                            <Route path={'*'} element={<Navigate to='changeList' />} />
                        </Routes>
                    </Suspense>
                </Content>
            </Layout>
            <Modal title="提示" visible={logoutVisible} onOk={logout} onCancel={() => { setlogoutVisible(false) }}>
                <p>确认要退出吗?</p>
            </Modal>
        </Layout >
    )
}
